<template>
  <view class="index" :style="{'backgroundImage':'url('+ img +')' }">
    <image src="../../static/logo.png" mode="" class="icon_logo"></image>
    <view class="name">
      预约团队名称
    </view>
    <view class="content">
      这是公司宣传语这是公司宣传语
    </view>
    <view class="t_button">
      预约上门设计
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    toRefs
  } from 'vue'

  const data = reactive({
    page: '预约上门设计进入页',
    img: '../static/design/banner.png'
  })
  const {
    page,
    img
  } = toRefs(data)
</script>

<style lang="scss" scoped>
  .index {
    position: relative;
    width: 100%;
    height: 100vh;
    background-position: 50% 50%;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;

    .icon_logo {
      margin-top: 200rpx;
      width: 100rpx;
      height: 100rpx;
    }

    .name {
      margin-top: 10rpx;
      font-size: 55rpx;
      font-weight: 900;
      color: black;
    }

    .content {
      margin-top: 20rpx;
      font-size: 24rpx;
      font-weight: 400;
    }

    .t_button {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      bottom: 200rpx;
      width: 90%;
      height: 80rpx;
      background-color: #6DCEB9;
      line-height: 80rpx;
      font-size: 28rpx;
      font-weight: 600;
      color: #fff;
      border-radius: 40rpx;
      text-align: center;
    }
  }
</style>